<layout name="page" />
<block name="content">
	<style>
		.user_list {
			height: 400px;
			overflow-y: auto;
		}
		.user_list li.tbody {
			cursor: pointer;
		}
		.avtar {
			box-sizing: border-box;
			border: 0px solid #ccc;
			border-radius: 50%;
			width: 50px;
			height: 50px;
		}
		.table ul li:first-child {
			border-top: 1px solid #ccc;
		}
		.table span {
			line-height: 24px;
			border: 0px;
		}
		.table li {
			border-bottom: 1px solid #ccc;
			padding-top: 10px;
			padding-bottom: 10px;
			border-left: 1px solid #ccc;
			border-right: 1px solid #ccc;
		}
		.table {
			border: 0px;
		}
	</style>
	{:widget('page_header/search',array('name'=>'员工通讯录'))}
	<div class="x1 sub box">
		<div class="w28 m100 frame" style="max-height:500px;overflow-y: auto;">
			<div class="tree-menu">
				{:widget('html/tree_menu',array($tree_menu))}
			</div>
		</div>
		<div style="width:16px;"></div>
		<div style="width:16px;"></div>
		<div class="x1 m100" style="height:500px;">
			<div class="table">
				<ul>
					<foreach name="search" val="vo">
						<li>
							<span class="w8 text-center"><img class="pic avtar" src="{$vo.pic}"></span>
							<span class="w9 x1">
								<div class="row">
									<div class="col-6">
										<div class="">
											<span class="name">{$vo.name}</span><span class="position">{$vo.position_name}</span>
										</div>
										<div class="">
											<span class="hidden-s dept">{$vo.dept_name}</span>
										</div>
									</div>
									<div class="col-6">
										<div>
											<span class="mobile_tel" href="tel:{$vo.mobile_tel}">{$vo.mobile_tel}</span>
										</div>
										<div>
											<span class="email hidden-s">{$vo.email}</span>
										</div>
									</div>
								</div></span>
						</li>
					</foreach>
				</ul>
			</div>
		</div>
	</div>
	<div id="sample" class="hidden"  >
		<li>
			<span class="w8 text-center"><img class="pic avtar" src=""></span>
			<span class="w19 x1">
				<div class="row">
					<div class="col-6">
						<div class="">
							<span class="name"></span><span class="position"></span>
						</div>
						<div class="">
							<span class="dept"></span>
						</div>
					</div>
					<div class="col-6">
						<div>
							<span class="mobile_tel"></span>
						</div>
						<div>
							<span class="email hidden-s"></span>
						</div>
					</div>
				</div></span>
		</li>
	</div>
</block>
<block name="js">
	<script>
		layui.use(['global'], function() {
			var $ = layui.jquery;
			$('.tree-menu a').on('click', function() {
				$(".tree-menu a.active").removeClass("active");
				$this = $(this);
				$this.addClass("active");
				var vars = {};
				vars.id = $this.attr('node');
				send_ajax("{:url('read')}", vars, function(ret) {
					show_data(ret);
				});
				return false;
			});

			function show_data(ret) {
				$(".table ul li").remove();
				for (var s in ret.data) {
					$("#sample .emp_no").text(ret.data[s].emp_no);
					$("#sample .name").text(ret.data[s].name);
					$("#sample .position").text(ret.data[s].position_name);
					$("#sample .dept").text(ret.data[s].dept_name);
					$("#sample .email").text(ret.data[s].email);
					$("#sample .pic").attr('src', ret.data[s].pic);
					$mobile = $("<a></a>");
					$mobile.attr("href", "tel:" + ret.data[s].mobile_tel);
					$mobile.html(ret.data[s].mobile_tel);

					$("#sample .mobile_tel").html($mobile);
					html = $("#sample").html();
					$(".table ul").append(html);
					$("#sample li span a").text("");
				}
			}

		});
	</script>
</block>